<script lang="ts" setup>
import { onMounted, reactive, ref, watch, inject, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import { get } from "../../axios/api";
import bus from "@/mitt";
import {
	getCurrentInstance
	} from "vue";
import { nextTick } from "process";
const {proxy} = getCurrentInstance();
const isCollapse = ref(true);
const router = useRoute();
let nowRouter = ref("");
let NavList = ref({});
let childPath = ref([]);
const innerWidth = ref(window.innerWidth);

watch(
  () => proxy.$store_state.NavList.value,
  (newValue) => {
      NavList.value  = []
      NavList.value = newValue
      let menuTitleId = proxy.$store_state.menuTitleId.value

      setTimeout(() => {
            let updataTitleColor:any = [];
            let DOMlist = document.querySelectorAll('[id*=NavTitleID]')
            console.log('DOMlist',DOMlist,'menuTitleId',menuTitleId);
            
            DOMlist.forEach(element => {
            if(element.id != 'NavTitleID_'+menuTitleId){
              updataTitleColor = element.querySelectorAll('div')
              updataTitleColor[0].classList.remove('SelectNavTitle')
            }else{
              updataTitleColor = element.querySelectorAll('div')
              updataTitleColor[0].classList.add('SelectNavTitle')
            }
          })
        }, 0);
  }
);

watch(
  () => proxy.$store_state.NowRouterPath.value,
  (newValue, value) => {
    NavList.value.map((item) => {
      newValue.indexOf(item.fullPath) == -1
        ? item.children.map((child: any) => {
            nowRouter.value = newValue;
            router.fullPath.indexOf(newValue) !== -1
              ? (nowRouter.value = newValue)
              : "";
          })
        : "";
    });
    add()
  }
);


onMounted(() => {
  if (sessionStorage.getItem("NavList")) {
    NavList.value = proxy.$store.NavList;
    nowRouter.value = router.fullPath;
  }

});
const add=()=>{
  console.log(12312);
  
}
</script>
<template>
  <el-menu
    class="el-menu-demo"
    :unique-opened="false" 
    :router="true"
    :default-active="nowRouter"
    background-color="#fff"
    text-color="#000"
    active-text-color="#409eff"
  >
    <template v-for="(item, index) in NavList">
      <!-- <el-sub-menu v-if="item.web_path == null" :index="item.id"> :class="{clickMenuTitle : proxy.$store_state.menuTitleId.value == item.id }" -->
        <el-sub-menu  :index="item.id.toString()"  :id="`NavTitleID_`+item.id" @click="add"> 
        <template  #title  >
          <el-icon><component :is="item.web_icon.slice(item.web_icon.lastIndexOf('-') + 1,item.web_icon.length).slice(0,1).toUpperCase() + item.web_icon.slice(item.web_icon.lastIndexOf('-') + 1,item.web_icon.length).slice(1)" /></el-icon>
          <span class="Nav_FontSize">{{ item.name }}</span>
        </template>
        <el-menu-item-group v-for="(children, k) in item.children" :index="children.id.toString()" >
          <el-menu-item :index="children.web_path"  class="Click_FontSize"  >
            {{ children.name }}</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
      <!-- <el-menu-item v-else :index="item.web_path">
        <el-icon><component :is="item.web_icon.slice(item.web_icon.lastIndexOf('-') + 1,item.web_icon.length).slice(0,1).toUpperCase() + item.web_icon.slice(item.web_icon.lastIndexOf('-') + 1,item.web_icon.length).slice(1)" /></el-icon>
        <template #title>{{ item.name }}</template>
      </el-menu-item> -->
    </template>
  </el-menu>
</template>
<style scoped lang="less">
.el-menu-item.is-active,
.el-menu-item-group.is-active .el-menu-item__item,
.el-submenu__title.is-active {
  background-color: #b7e0ee !important; /* 使用 !important 来确保样式生效 */
}
::v-deep(.el-menu-item-group__title) {
  padding: 0 !important; /* 使用 !important 来确保样式生效 */
}
::v-deep(.Click_FontSize){
  height: 40px !important;
  font-size: var(--Click_Menu_FontSize);
}
::v-deep(.Nav_FontSize){
  font-size: var(--Nav_FontSize);
  font-weight: bold;
}

//菜单行高
::v-deep(.el-menu-item-group ,.el-menu-item){
  height: 40px !important;
}

// 下课菜单高度
::v-deep(.el-sub-menu__title){
  height: 48px !important;
}

//菜单点击选中的样式
::v-deep(.el-menu-item.is-active){
  color: var(--Click_Nav_FontColor);
  background-color: var(--Click_Nav_Background) !important;
}
// 鼠标移入样式
::v-deep(.el-menu-item-group) :hover{
  background: #f0f2f7 !important;
}

// 选中的下拉菜单  
::v-deep(.SelectNavTitle){
color: var(--Click_Nav_FontColor);
}
</style>